<template>
  <div>
    <van-grid :column-num="4">
      <van-grid-item>
        <div class="addIcon">
          <span>+</span>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="addIconOne">
          <span>+</span>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="addIconTwo">
          <span data-content="+">+</span>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="addIconThree">
          <span data-content="+">+</span>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="addIconFour">
          <!-- <span data-content="+">+</span> -->
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="addIconFive">
          <span data-content="+">+</span>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'iconText',
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.addIcon {
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 25px;
  -webkit-filter: brightness(2.3);
  filter: brightness(2.3);
  filter: saturate(3.6);
  opacity: 0.7;
  animation-direction: alternate;
  animation: addIcon 5s infinite;
  span {
    font-size: 45px;
    position: relative;
    left: 10px;
  }
}
@keyframes addIcon {
  0% {
    border-radius: 25px;
    background: #d219ef;
    left: 0px;
    top: 0px;
  }
  25% {
    border-radius: 25px 30px 25px 25px;
    background: #ad00ff;
    left: 200px;
    top: 0px;
  }
  50% {
    border-radius: 25px 25px 30px 25px;
    background: #ec14ba;
    left: 200px;
    top: 200px;
  }
  75% {
    border-radius: 25px 25px 25px 30px;
    background: #6972ff;
    left: 0px;
    top: 200px;
  }
  100% {
    border-radius: 30px 25px 25px 25px;
    background: #ff9e00;
    left: 0px;
    top: 0px;
  }
}

.addIconOne {
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 25px;
  box-shadow: 2px 7px 9px 0px #f5b33c;
  span {
    color: #f5b33c;
    font-size: 45px;
    position: relative;
    left: 10px;
  }
}
.addIconTwo {
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 25px;
  box-shadow: 2px 7px 9px 0px #f5b33c;
  span {
    color: #fff;
    font-size: 45px;
    position: relative;
    left: 10px;
  }
  span:before {
    position: absolute;
    left: 0;
    top: 0;
    color: #df9527;
    display: block;
    height: 73%;
    content: attr(data-content);
    overflow: hidden;
  }
  span::after {
    position: absolute;
    left: 0;
    top: 0;
    color: #e616fb;
    display: block;
    width: 48%;
    content: attr(data-content);
    overflow: hidden;
  }
}
.addIconTwo::before {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  box-shadow: -1px 3px 4px 0px #e12de4;
  content: no-close-quote;
}

.addIconThree {
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 25px;
  box-shadow: inset -2px -1px 10px 0px #e13cf5;
  span {
    color: #e13cf5;
    font-size: 45px;
    position: relative;
    left: 10px;
  }
  span:before {
    position: absolute;
    left: 0;
    top: 0;
    color: #1c82da;
    display: block;
    width: 55%;
    height: 54%;
    content: attr(data-content);
    overflow: hidden;
  }
}
.addIconThree::before {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  box-shadow: inset 3px 3px 8px 2px #5bccf9;
  content: no-close-quote;
}

.addIconFour {
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 25px;
  box-shadow: inset -2px -1px 10px 0px #a6f53c;
  animation: addIconFour 5s infinite;
  span {
    color: #f5d63c;
    font-size: 45px;
    position: relative;
    left: 10px;
  }
  span:before {
    position: absolute;
    left: 0;
    top: 0;
    color: #f9a55b;
    display: block;
    width: 55%;
    height: 54%;
    content: attr(data-content);
    overflow: hidden;
  }
}
.addIconFour::before {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  box-shadow: inset 3px 3px 8px 2px #f9a55b;
  content: no-close-quote;
}
@keyframes addIconFour {
  0% {
    border-radius: 25px;
    left: 0px;
    top: 0px;
  }
  25% {
    border-radius: 25px 35px 25px 25px;
    left: 200px;
    top: 0px;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
  }
  50% {
    border-radius: 25px 25px 35px 25px;
    left: 200px;
    top: 200px;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari and Chrome */
  }
  75% {
    border-radius: 25px 25px 25px 35px;
    left: 0px;
    top: 200px;
    transform: rotate(270deg);
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Safari and Chrome */
  }
  100% {
    border-radius: 35px 25px 25px 25px;
    left: 0px;
    top: 0px;
    transform: rotate(360deg);
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Safari and Chrome */
  }
}

.addIconFive {
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 25px;
  box-shadow: inset -2px -1px 10px 0px #e13cf5;
  span {
    // 实现文字渐变
    background-image: linear-gradient(to right bottom, #34e1e3, #e463ed);
    background-clip: text;
    font-size: 45px;
    position: relative;
    left: 10px;
    color: transparent;
  }
}
.addIconFive::before {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  box-shadow: inset 3px 3px 8px 2px #5bccf9;
  content: no-close-quote;
}
</style>